
<template>
  <div class="yongjinjilu">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;"
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }">分销商管理</el-breadcrumb-item>
            <el-breadcrumb-item>分销模式</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <!-- <div class="flexbc">
            <div class="flex" style="margin-bottom: 30px;">
              <div class="flexcc " style="cursor: pointer;width: 220px;"  @click="changetab(1)" :class="tab == 1?'sxjact':'sxj'"  >分销等级管理模式</div>
              <div class="flexcc " style="cursor: pointer;"  @click="changetab(2)" :class="tab == 2?'sxjact':'sxj'">轻分销模式</div>
            </div>
          </div>-->

          <!-- tab -->
          <div style="margin-bottom: 3rem;">
            <div class="t_choose_tab_box">
              <div @click="changetab(1)" :class="{t_tab_title_lei:tab ==1}" class="t_tab_title">
                分销等级管理模式
                <div class="t_under_line" :class="{t_under_line_lei:tab ==1}"></div>
              </div>

              <div
                @click="changetab(2)"
                :class="{t_tab_title_lei:tab ==2}"
                class="t_tab_title"
                style="margin-left: 40px;margin-right: 70px; position: relative;"
              >
                轻分销模式
                <div class="t_under_line" :class="{t_under_line_lei:tab ==2}"></div>
              </div>
            </div>
          </div>
          <!-- 分销等级管理模式 -->
          <div v-if="tab==1">
            <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div>
                <img src="../../../static/img/tb1.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>分销等级管理启用设置</div>
            </div>
            <div class="baibeijing flexc">
              <div>
                <el-switch
                  v-model="openswitch"
                  @change="postk"
                  :disabled="is_qfx==1"
                  style="width: 85px; height: 41px; margin-right: 20px;"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </div>
              <div style="color: rgb(175, 179, 188);">启用等级机制后将由等级决定分销商的佣金比例和提成比例，等级对应的佣金比例由您设置。</div>
            </div>
            <div style="padding: 19px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div>
                <img src="../../../static/img/tb3.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>等级值设置</div>
            </div>
            <div
              style="background: #fff; padding: 40px; border-radius: 20px; color: rgb(64, 66, 71);"
            >
              <div style="margin-bottom: 15px;">升/保级方式：按照等级值</div>
              <div class="flexc" style="margin-bottom: 30px;">
                <div>等级值名称：</div>
                <div>
                  <el-input
                    :disabled="!openswitch"
                    v-model="list.level_name"
                    style="width: 300px; margin-right: 30px;"
                    placeholder="请输入等级值名称"
                  ></el-input>
                </div>
              </div>
              <div
                style="margin-bottom: 20px; color: rgb(64, 66, 71); font-weight: bold;"
              >等级值规则：修改等级值只会影响到之后产生的等级值，已产生的不受影响</div>
              <div class="flex" style="margin-bottom: 20px;">
                <div style="width: 200px; padding-left: 40px;">任务</div>
                <div style="width: 200px; padding-left: 60px;">获得等级值</div>
              </div>

              <div style="margin-bottom: 20px; font-size: 14px;" v-for="item in list.level_rules">
                <div v-if="item.type == 'self_order'" class="flexc">
                  <div style="width: 200px;">
                    <el-checkbox
                      :disabled="!openswitch"
                      v-model="item.open"
                      :true-label="1"
                      :false-label="0"
                    >发展订单</el-checkbox>
                  </div>

                  <div style="width: 120px; text-align: right;">每1单得：</div>
                  <div>
                    <el-input
                      :disabled="!openswitch"
                      v-model="item.level_exp"
                      style="width: 100px; margin-right: 30px;"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                  <div>订单要求：</div>

                  <div>
                    <el-select
                      :disabled="!openswitch"
                      v-model="item.order_status"
                      style="width: 100%;"
                      placeholder
                    >
                      <el-option label="订单发货" :value="550"></el-option>
                      <el-option label="订单激活" :value="700"></el-option>
                    </el-select>
                  </div>
                </div>
                <div v-if="item.type == 'merchant_order'" class="flexc">
                  <div style="width: 200px;">
                    <el-checkbox
                      :disabled="!openswitch"
                      v-model="item.open"
                      :true-label="1"
                      :false-label="0"
                    >邀请分销员</el-checkbox>
                  </div>

                  <div style="width: 120px; text-align: right;">每发展1人得：</div>
                  <div>
                    <el-input
                      :disabled="!openswitch"
                      v-model="item.level_exp"
                      style="width: 100px; margin-right: 30px;"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                  <div>要求分销商成功发展订单数量：</div>

                  <el-popover
                    placement="top-start"
                    trigger="hover"
                    content="为预防邀请人头充数增加的限制条件，被邀请的分销商必须达到订单要求才可计算积分"
                  >
                    <div slot="reference" class="t_wen">?</div>
                  </el-popover>

                  <div>
                    <el-input
                      :disabled="!openswitch"
                      v-model="item.order_count"
                      style="width: 100px; margin-right: 30px;"
                      placeholder="请输入"
                    ></el-input>
                  </div>
                  <div>订单要求：</div>

                  <div>
                    <el-select
                      :disabled="!openswitch"
                      v-model="item.order_status"
                      style="width: 100%;"
                      placeholder
                    >
                      <el-option label="订单发货" :value="550"></el-option>
                      <el-option label="订单激活" :value="700"></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
            </div>

            <div style="padding: 30px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div>
                <img src="../../../static/img/tb2.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>分销员等级设置</div>
            </div>
            <div class="flexbc" style=" font-size: 14px;">
              <div class="flexc">
                <div style="width: 100px; padding-left: 20px;">序号</div>
                <div style="width: 200px; padding-left: 20px;">等级名</div>
                <div style="width: 250px; padding-left: 20px;">升级条件</div>
                <!-- <div style="width: 400px; padding-left: 20px;">保级条件</div> -->
                <div style=" padding-left: 20px;width: 500px;display:flex">
                  <div>给分销商的佣金</div>
                  <el-tooltip
                    content="按照佣金比例设置:商品佣金基数X百分比=下游的发展订单佣金额度。按照抽取金额设置:佣金基数减去设置的抽取金额=下游的发展订单佣金额度"
                    placement="top"
                  >
                    <div class="mark_container">?</div>
                  </el-tooltip>
                </div>
                <div style="display:flex">
                  <div>给分销商的分销抽成</div>
                  <el-tooltip
                    content="当订单由分销商的下游发展，分销商可以获得的抽成的金额(按照佣金比例设置:商品佣金基数x百分比=抽取金额，按照抽取金额设置:设置多少就是抽取多少)"
                    placement="top"
                  >
                    <div class="mark_container">?</div>
                  </el-tooltip>
                </div>
              </div>
              <div
                v-if="openswitch"
                style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 15px; border-radius: 25px; cursor: pointer;"
                @click="add"
              >添加等级 +</div>
            </div>

            <div
              class="flexc"
              style="background: #fff; border-radius: 30px; margin-top: 20px; padding: 5px 0; font-size: 14px;"
              v-for="(item,index) in list.level_conditions"
            >
              <div style="width: 100px; padding-left: 20px;">{{item.level}}级</div>
              <div style="width: 200px; padding-left: 20px;">
                <el-input
                  :disabled="!openswitch"
                  v-model="item.lname"
                  style="width: 150px; margin-right: 30px;"
                  placeholder="请输入等级值名称"
                ></el-input>
              </div>
              <div style="width: 250px; padding-left: 20px;" v-if="item.level == 1">初始等级无需设置</div>
              <div style="width: 250px; padding-left: 20px;" v-if="item.level != 1">
                等级值达到
                <el-input
                  :disabled="!openswitch"
                  v-model="item.level_exp"
                  style="width: 100px; margin-right: 10px;"
                  placeholder="请输入经验值"
                ></el-input>
              </div>
              <!-- <div style="width: 400px; padding-left: 20px;" v-if="item.level == 1">无条件，不清退</div>
              <div style="width: 400px; padding-left: 20px;"  v-if="item.level != 1">
                <el-input v-model="item.level_con.day" style="width: 70px; margin-right: 10px;" placeholder="请输入天数"></el-input>天内，
                等级值新增
                <el-input v-model="item.level_con.exp" style="width: 70px; margin-right: 10px; margin-left: 10px;" placeholder="请输入经验值"></el-input>能保级
              </div>-->

              <div class="flexc" style="width: 500px;">
                <el-radio
                  v-model="item.commission_type"
                  :disabled="!openswitch"
                  :label="1"
                  class="flexc"
                >
                  <div class="flexc">
                    <div>抽取金额：</div>
                    <div style="position: relative;">
                      <div
                        style="position: absolute; right: 20px; top: 0; line-height: 41px; z-index: 999;"
                      >元</div>
                      <el-input
                        :disabled="!openswitch"
                        v-model="item.commission_amount"
                        style="width: 100px;"
                        placeholder="金额"
                      ></el-input>
                    </div>
                  </div>
                </el-radio>

                <el-radio
                  v-model="item.commission_type"
                  :disabled="!openswitch"
                  :label="0"
                  class="flexc"
                >
                  <div class="flexc">
                    <div>佣金比例：</div>
                    <div style="position: relative;">
                      <div
                        style="position: absolute; right: 45px; top: 0; line-height: 41px; z-index: 999;"
                      >%</div>
                      <el-input
                        :disabled="!openswitch"
                        v-model="item.commission_rate"
                        style="width: 100px; margin-right: 30px;"
                        placeholder="百分比"
                      ></el-input>
                    </div>
                  </div>
                </el-radio>
              </div>
              <!-- <div class="flexc" style=" padding-left: 20px;width: 520px;">
                <el-radio :disabled="!openswitch" v-model="item.user_fee_type" :label="0" class="flexc">
                  <div class="flexc">
                    <div>佣金比例：</div>
                    <div style="position: relative;">
                      <div style="position: absolute; right: 45px; top: 0; line-height: 41px; z-index: 999;color: rgb(2, 12, 29)">%</div>
                      <el-input :disabled="!openswitch" v-model="item.commission_rate" style="width: 100px; margin-right: 30px;" placeholder="请输入商品佣金比例"></el-input>
                    </div>
                  </div>
                </el-radio>
                <el-radio :disabled="!openswitch" v-model="item.user_fee_type" :label="1" class="flexc" style="margin-right: 15px;">
                  <div class="flexc" >
                    <div>佣金金额：</div>
                    <div style="position: relative;">
                      <el-input :disabled="!openswitch" v-model="item.user_fee_amount"  style="width: 100px; margin-right: 30px;" placeholder="请输入商品佣金金额"></el-input>
                    </div>
                  </div>
                </el-radio>

              </div>-->
              <div class="flexc">
                <el-radio
                  :disabled="!openswitch"
                  v-model="item.user_fee_type"
                  :label="0"
                  class="flexc"
                  style="margin-right: 15px;"
                >
                  <div class="flexc">
                    <div>抽成比例：</div>
                    <div style="position: relative;">
                      <div
                        style="position: absolute; right: 20px; top: 0; line-height: 41px; z-index: 999; color: rgb(2, 12, 29)"
                      >%</div>
                      <el-input
                        :disabled="!openswitch"
                        v-model="item.user_fee_percent"
                        style="width: 100px; "
                        placeholder="请输入"
                      ></el-input>
                    </div>
                  </div>
                </el-radio>

                <el-radio
                  :disabled="!openswitch"
                  v-model="item.user_fee_type"
                  :label="1"
                  class="flexc"
                >
                  <div class="flexc">
                    <div>抽成金额：</div>
                    <div style="position: relative;">
                      <el-input
                        :disabled="!openswitch"
                        v-model="item.user_fee_amount"
                        @input="shuru(item)"
                        style="width: 100px; margin-right: 15px;"
                        placeholder="请输入"
                      ></el-input>
                    </div>

                    <div v-if="item.jinggao">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="根据您当前的的分销层级，设置该金额会导致低于50元佣金的商品在末端分销商处佣金为负数。"
                        placement="top"
                      >
                        <div class="t_over_text">警告</div>
                      </el-tooltip>
                    </div>
                  </div>
                </el-radio>
              </div>
            </div>
            <div
              v-if="openswitch"
              style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 0; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 100px; text-align: center;"
              @click="baocun"
            >保存</div>

            <!-- <div style="padding: 30px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div><img src="../../../static/img/tb3.png" style="width: 22px; margin-right: 10px;"></div>
              <div>编辑分销招商说明</div>
            </div>

            <div v-if="openswitch" style="margin: 0px 0;"><fuwenben :content="reseller_inv_des" @getcontent="getcontent" v-if="relo"></fuwenben></div>

            <div style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 0; margin-bottom: 50px; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 100px; text-align: center;" @click="postf()">保存</div>-->
            <!-- <footers></footers> -->
          </div>
          <!-- 轻分销模式 -->
          <div v-if="tab==2">
            <div
              style="background-color: #E0E7EE;padding: 16px 20px;margin-bottom: 40px;color: #6E6E6E;"
            >
              说明：轻分销模式下，每层分销商的佣金金额相同，当下级发展订单，上级不再抽取佣金抽成 ，而是额外奖励直属上游分销商固定金额，该模式的优势是可以支持无限层级分销，每个层级的分销商待遇都相同
              <div style="margin-top: 10px;">
                例：3级分销商发展一个订单直属上游的2级会获得额外奖励，1级不会因此获得奖励。
                <el-button
                  @click="openpdf"
                  type="text"
                  style="margin-left: 30px;color: #005AFF;"
                >详尽说明请点击</el-button>
              </div>
            </div>
            <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div>
                <img src style="width: 22px; margin-right: 10px;" />
              </div>
              <div>轻分销模式启用设置</div>
            </div>
            <div class="baibeijing flexc">
              <div>
                <el-switch
                  @change="baocunqing(1)"
                  v-model="is_qfx"
                  style="width: 85px; height: 41px; margin-right: 20px;"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </div>
              <div
                style="color: rgb(175, 179, 188);"
              >开启后原设置的所有分销商抽成佣金将会失效，奖励将按照下方设置金额支出，同时每个层级的分销商在售商品处的“分销抽成”将显示为“分销奖励”。</div>
            </div>
            <div style="padding: 19px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
              <div>
                <img src="../../../static/img/tb3.png" style="width: 22px; margin-right: 10px;" />
              </div>
              <div>分销奖励设置</div>
            </div>
            <div class="baibeijing flexc">
              <div>直属分销商发展订单奖励上游金额：</div>
              <div style="color: rgb(175, 179, 188);">
                <el-input
                  :disabled="is_qfx==0"
                  v-model="reward_amount"
                  style="width: 300px; margin-right: 30px;"
                  type="number"
                  placeholder="请输入金额"
                ></el-input>
              </div>
            </div>
            <div
              v-if="is_qfx"
              style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 0; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 100px; text-align: center;"
              @click="baocunqing(2)"
            >保存</div>
          </div>
        </div>
      </div>
    </div>

    <div class="content" v-if="shoujiban">
      <div class="tabs_container" v-if="!hide">
        <div @click="choosetab('one')" :class="activeName === 'one' ? 'wares' : 'initial'">管理分销商</div>
        <div
          @click="choosetab('two')"
          :class="activeName === 'two' ? 'wares' : 'initial'"
          style="margin-left:30px"
        >发展分销商</div>
      </div>
      <div class="link_container" v-show="activeName === 'two'">
        <div class="copylink">
          <div class="linktext" @click="copy(copyurl)">复制邀请链接</div>
        </div>
        <div class="invite_container">
          <div class="code_switch">
            <div style="color:#333333;font-size:14px;display:flex">
              邀请码
              <div
                class="refurbish"
                style="color:#005AFF"
                @click="refurbishClick"
                v-if="form.distributor==1"
              >
                刷新
                <img src="../../../static/appimg/reaishBlue.png" alt />
              </div>
            </div>
            <div>
              <van-switch
                @change="(value)=>setSwitch(value)"
                v-model="form.distributor"
                active-color="#005AFF"
                inactive-color="#ccc"
                active-value="1"
                inactive-value="0"
              />
            </div>
          </div>
          <div class="invite_code" v-if="form.distributor==1">
            <div class="char" v-for="(char, index) in inviteCodeChars" :key="index">{{char}}</div>
          </div>
          <div class="copy_code" @click="copy(form.invite_code)" v-if="form.distributor==1">复制邀请码</div>
        </div>
      </div>
      <div class="footer_content" v-show="activeName === 'two'">
        <div class="initial_set">
          <div style="font-size:14px;color:#404247">默认初始佣金设置</div>
          <div style="display:flex;align-items:center;">
            <div
              style="font-size:14px"
              v-if="commission.user_fee_type==1"
            >
              按金额抽成
              <span style="margin:0 5px">{{commission.user_fee_amount}}</span>
            </div>
            <div
              style="font-size:14px"
              v-if="commission.user_fee_type==0"
            >
              按比例抽成
              <span style="margin:0 5px">{{commission.user_fee_percent}}%</span>
            </div>
            <img
              src="../../../static/appimg/rightarrow.png"
              alt
              style="width:12px;height:12px"
              @click="jumpMoeny"
            />
          </div>
        </div>
        <div class="accord_sign">
          <div class="sign_switch">
            <div style="font-size:14px;color:#404247">签署协议才可提现</div>
            <div>
              <van-switch
                @change="switchChange"
                v-model="sign_switch"
                active-color="#005AFF"
                inactive-color="#ccc"
              />
            </div>
          </div>
          <div style="color:#787D85;font-size:12px;margin-top:10px">开启后，未签约用户将无法提现，协议内容请自行编辑</div>
        </div>
      </div>
      <div class="footer_tabs" v-show="activeName === 'two'">
        <footerApp />
      </div>
    </div>
    <!-- 修改等级管理 -->
    <el-dialog
      :title="openswitch==0?'关闭等级管理':'启用等级管理'"
      :visible.sync="isshowlevel"
      width="500px"
      :close-on-click-modal="false"
    >
      <div v-if="openswitch==0">关闭等级管理后，分销商由等级控制的佣金比例和抽成比例值仍会保留，您可在此基础上修改。</div>
      <div v-if="openswitch==1">启用等级管理后，原人工编辑的分销商佣金比例及抽成比例将会被等级设置的比例覆盖，确定开启么？</div>
      <div style="text-align: right;margin-top: 30px;">
        <el-button round @click="reslevel">取 消</el-button>
        <el-button round type="primary" @click="surelevel">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 轻分销详细说明 -->
    <!-- <el-dialog
      title="轻分销详细说明"
      :visible.sync="isshowqfx"
      width="1000px"
      :close-on-click-modal="false">
      <img src="../../../static/img/qfx.png" style="width: 100%;" alt="">
      <div style="text-align: right;margin-top: 30px;">
        <el-button round type="primary" @click="isshowqfx=false">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
import fuwenben from "@/components/fuwenben.vue";
import footerApp from "../footerApp.vue";
export default {
  name: "yongjinjilu",
  components: {
    left,
    top,
    topandleft,
    fuwenben,
    footers,
    footerApp
  },
  props: {
    hide: false
  },
  data() {
    return {
      sign_switch: false,
      sign_url: "",
      inviteCodeChars: [],
      form: {},
      search: {
        page: 1,
        page_size: 20
      },
      list: [],
      copyurl: "",

      total: 0,
      widthss: false,
      shoujiban: false,
      loading: false,
      finished: false,
      relo: true,
      reseller_inv_des: "",
      openswitch: 0,
      isshowlevel: false,
      tab: 1,
      is_qfx: 0,
      reward_amount: "",
      isshowqfx: false,
      inviteCode: "",
      activeName: "two",
      commission: {}
    };
  },
  created() {
    this.getsharelink();
    this.getpeizhi();
    this.getSign();
    this.getCode();
    this.getmoren();
  },
  mounted() {
    if (window.screen.width == 1920) {
      this.widthss = true;
    }
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;
      console.log("手机版", this.shoujiban);
    } else {
    }
    this.getf();
    let p = this.getinfo();
    p.then(res => {
      this.getlist();
    });
  },
  methods: {
    choosetab(val) {
      console.log("this.activeName ", this.activeName);
      if (val === "one") {
        window.location.href = "/hou/fenxiaoshangguanli/fenxiaoshangguanli";
      } else {
        this.activeName = val;
      }
    },
    getSign() {
      axios.get("/own/sign/get").then(response => {
        if (response.data.msg.code == 0) {
          const { sign_switch, sign_url } = response.data.data;
          this.sign_switch = sign_switch == 1;
          this.sign_url = sign_url;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getmoren: function() {
      axios.get("/own/user/fee/get").then(response => {
        if (response.data.msg.code == 0) {
          this.commission = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    switchChange(value) {
      axios
        .post("/own/sign/config", {
          sign_switch: this.sign_switch ? 1 : 0,
          sign_url: this.sign_url
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            if (value) {
              this.$message.success("协议签署开启成功");
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    jumpMoeny() {
      this.$router.push({ path: "/fenxiaoshangguanli/defaultMoney" });
      // window.location.href = "/hou/fenxiaoshangguanli/defaultMoney";
    },
    setSwitch(value) {
      console.log(this.form, "this.form");
      axios.post(`/own/system/config?distributor=${value}`).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("保存成功");
          this.getpeizhi();
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getCode() {
      axios.get("/own/system/inv/get").then(response => {
        if (response.data.msg.code == 0) {
          this.inviteCode = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    // 更新邀请码
    refurbishClick() {
      axios.post("/own/system/inv/update").then(response => {
        if (response.data.msg.code == 0) {
          this.getpeizhi();
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },

    //复制功能
    copy: function(t) {
      console.log(t);
      t = t.toString();
      var that = this;
      this.$copyText(t).then(res => {
        that.$message.success("复制成功");
      });
    },
    //获取邀请链接
    getsharelink() {
      //获取当前链接

      axios.get("/own/reseller/check-code").then(response => {
        if (response.data.msg.code == 0) {
          console.log("当前链接");
          this.copyurl =
            window.origin +
            "/web/login?" +
            encodeURIComponent(response.data.data);
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    shuru: function(item) {
      let m = item.user_fee_amount * this.info.limit_level;
      console.log(m);
      if (m > 50) {
        this.$set(item, "jinggao", true);
      } else {
        this.$set(item, "jinggao", false);
      }
    },

    getinfo: function() {
      return new Promise((res, rej) => {
        axios.get("/own/system/get").then(response => {
          if (response.data.msg.code == 0) {
            this.info = response.data.data;
            this.openswitch = response.data.data.level_open;
            this.is_qfx = response.data.data.is_qfx;
            this.reward_amount = response.data.data.reward_amount;

            if (this.openswitch == 1) {
              this.tab = 1;
            } else if (this.is_qfx == 1) {
              this.tab = 2;
            } else {
              this.tab = 1;
            }

            res("ok");
            console.log("info");
            console.log(this.info);
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      });
    },

    getf: function() {
      axios.get("/own/reseller/inv/des/get").then(response => {
        if (response.data.msg.code == 0) {
          this.reseller_inv_des = response.data.data.reseller_inv_des;
          this.relo = false;
          this.$nextTick(() => {
            this.relo = true;
          });
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    postf: function() {
      axios
        .post("/own/reseller/inv/des", {
          reseller_inv_des: this.reseller_inv_des
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getf();
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },

    getcontent: function(item) {
      this.reseller_inv_des = item;
      const fonts = document.getElementsByTagName('font');
      for (let font of fonts) {
          const face = font.getAttribute('face');
          if (face) {
              font.style.setProperty('font-family', `"${face}"`, 'important');
              console.log(`修复字体: ${face}`);
          }
      }
    },
    baocun: function() {
      let obj = {
        id: this.list.id,
        level_conditions: JSON.stringify(this.list.level_conditions),
        level_name: this.list.level_name,
        level_rules: JSON.stringify(this.list.level_rules),
        site_id: this.list.site_id
      };

      axios.post("/own/level/update", obj).then(response => {
        if (response.data.msg.code == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    add: function() {
      if (this.list.level_conditions.length == 7) {
        this.$message.error("最多7级，不能增加了");
        return false;
      }
      this.list.level_conditions.push({
        commission_rate: "0",
        level: this.list.level_conditions.length + 1,
        level_con: {
          day: 0,
          exp: 0
        },
        level_exp: 0,
        user_fee_percent: 0
      });
    },

    xiazai: function(id) {
      axios.post("/own/commission/sumdetail/exp", { id: id }).then(response => {
        if (response.data.msg.code == 0) {
          window.location.href = location.origin + "/" + response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    sousuo: function() {
      this.search.page = 1;
      this.getlist();
    },
    getlist: function() {
      axios.get("/own/level/info").then(response => {
        if (response.data.msg.code == 0) {
          this.list = response.data.data;

          this.list.level_rules = JSON.parse(this.list.level_rules);
          this.list.level_conditions = JSON.parse(this.list.level_conditions);
          this.list.level_conditions.forEach(item => {
            if (item.user_fee_type == 1) {
              let m = item.user_fee_amount * this.info.limit_level;
              if (m > 50) {
                this.$set(item, "jinggao", true);
              } else {
                this.$set(item, "jinggao", false);
              }
            }
          });
          console.log(this.list.level_rules);
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    fanye: function(val) {
      this.search.page = val;
      this.getlist();
    },
    //修改等级管理开关
    postk: function(val) {
      this.isshowlevel = true;
    },
    //取消
    reslevel() {
      if (this.openswitch == 1) {
        this.openswitch = 0;
      } else {
        this.openswitch = 1;
      }
      this.isshowlevel = false;
    },
    //确认
    surelevel() {
      if (this.openswitch == 1) {
        axios
          .post("/own/system/config", { level_open: this.openswitch })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.baocun();
              this.getinfo();
              this.isshowlevel = false;
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      } else {
        axios
          .post("/own/system/config", { level_open: this.openswitch })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getinfo();
              this.isshowlevel = false;
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    },
    //切换tab
    changetab(type) {
      this.tab = type;
      if (type == 1) {
        // this.getinfo()
      }
    },
    //保存轻分销
    baocunqing(type) {
      console.log(this.is_qfx);
      if (this.is_qfx == 1) {
        this.$confirm(
          "轻分销模式一旦开启后，无法退回等级管理模式，请谨慎开启?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            let obj = {
              site_id: this.list.site_id,
              is_qfx: this.is_qfx,
              reward_amount: this.reward_amount * 1
            };

            axios.post("/own/system/config", obj).then(response => {
              if (response.data.msg.code == 0) {
                this.getinfo();
                if (type == 1) {
                  this.$message.success("保存成功");
                }
              } else {
                this.$message.error(response.data.msg.info);
              }
            });
          })
          .catch(() => {
            this.is_qfx = 0;
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } else {
        this.$message.error("轻分销模式一旦开启后，无法退回等级管理模式");
        this.is_qfx = 1;
        return;
      }
    },
    openpdf() {
      var url = location.origin + "/hou/static/img/fx.pdf";

      window.open(url, "_blank");
      console.log(url);
    },
    getpeizhi() {
      axios.get("/own/system/get").then(response => {
        if (response.data.msg.code == 0) {
          this.form = response.data.data;

          this.form.distributor = this.form.distributor.toString();
          // 分割 invite_code 字段
          this.inviteCodeChars = this.form.invite_code.split("");
          this.relo = false;
          this.$nextTick(() => {
            this.relo = true;
          });
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>

<style scoped>
.content {
  /* display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: rgb(2, 12, 29);
  font-size: 0.24rem;
  background: #f6f8fb; */
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  color: rgb(2, 12, 29);
  font-size: 0.24rem;
  background: #f6f8fb;
}
.sxj {
  background: rgb(227, 232, 241);
  border-radius: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  color: rgb(175, 179, 188);
  width: 190px;
  height: 60px;
  margin-right: 30px;
}
.sxjact {
  background: rgb(0, 90, 255);
  border-radius: 30px;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
  color: rgb(255, 255, 255);
  width: 190px;
  height: 60px;
  margin-right: 30px;
}

.sxjactsj {
  background: rgb(0, 90, 255);
  border-radius: 0.3rem;
  text-align: center;
  font-weight: 500;
  color: rgb(255, 255, 255);
  width: 3.3rem;
  height: 0.7rem;
}
.sxjsj {
  background: rgb(227, 232, 241);
  border-radius: 0.3rem;
  text-align: center;
  font-weight: 500;
  color: rgb(175, 179, 188);
  width: 3.3rem;
  height: 0.7rem;
}
.t_choose_tab_box {
  display: flex;
}

.t_tab_title {
  color: rgb(152, 155, 161);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
}
.t_tab_title2 {
  color: rgb(152, 155, 161);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 17px;
}
.t_tab_title_lei {
  color: #005aff;
  font-weight: bold;
  font-size: 24px;
}
.t_tab_title_lei2 {
  color: #005aff;
  font-weight: bold;
  font-size: 18px;
}
.t_under_line {
  width: 30px;
  height: 2px;
  background-color: #f6f8fb;
  margin-top: 10px;
}
.t_under_line2 {
  width: 30px;
  height: 2px;
  background-color: #f6f8fb;
  margin-top: 10px;
}
.t_under_line_lei {
  background-color: #005aff;
}
</style>
<style scoped lang="less">
.yongjinjilu {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /deep/ .el-switch__core {
    width: 85px !important;
    height: 41px;
    border-radius: 20px;
    background: rgb(246, 248, 251);
    border: 1px solid rgb(227, 232, 241);
  }
  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: #005aff !important;
    background-color: #005aff !important;
  }
  /deep/ .el-switch.is-checked .el-switch__core::after {
    margin-left: -33px;
    left: 100% !important;
  }
  /deep/ .el-switch__core:after {
    width: 31px;
    height: 31px;
    top: 4px;
    left: 4px;
    background: rgb(227, 232, 241);
  }

  .t_wen {
    width: 18px;
    height: 18px;

    background-color: #9a9a9a;
    color: white;
    text-align: center;
    line-height: 18px;
    margin-right: 12px;
    border-radius: 50%;
    cursor: pointer;
  }
}
.mark_container {
  width: 15px;
  height: 15px;
  background: black;
  color: white;
  border-radius: 50%;
  margin-left: 5px;
  margin-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.link_container {
  // height: 329px;
  width: 100%;
  background: white;
  border-radius: 0 0 20px 20px;
  padding: 15px;
  .copylink {
    padding: 0 15px;
    height: 85px;
    width: 100%;
    border-radius: 15px;
    background: #ebf2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    .linktext {
      width: 100%;
      height: 45px;
      font-size: 15px;
      background: #005aff;
      color: white;
      line-height: 45px;
      text-align: center;
      border-radius: 25px;
    }
  }
  .invite_container {
    width: 100%;
    background: #ebf2ff;
    padding: 15px;
    border-radius: 15px;
    margin-top: 15px;
    .code_switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .invite_code {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    .char {
      height: 60px;
      width: 42px;
      background: white;
      border-radius: 10px;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      font-weight: bold;
      color: #005aff;
    }
  }
}
/deep/ .van-switch {
  width: 54px;
  height: 24px;
}
/deep/ .van-switch__node {
  width: 22px;
  height: 22px;
  margin: 1px 1px;
}
.copy_code {
  width: 100%;
  height: 45px;
  border: 1px solid #005aff;
  background: white;
  border-radius: 25px;
  color: #005aff;
  line-height: 45px;
  text-align: center;
  font-size: 15px;
  margin-top: 20px;
}
.refurbish {
  display: flex;
  margin-left: 20px;
  img {
    width: 14px;
    height: 14px;
    margin: 3px 0 0 5px;
  }
}
.footer_tabs {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.footer_content {
  // display: flex;
  flex: 1;
  width: 100%;
  // height: 100%;
  background: white;
  border-radius: 15px 15px 0 0;
  margin-top: 10px;
  padding: 0 15px;
}
.initial_set {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f6f6f6;
}
.accord_sign {
  height: 80px;
  width: 100%;
}
.sign_switch {
  width: 100%;
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.tabs_container {
  display: flex;
  width: 100%;
  height: 44px;
  background: white;
  padding: 0 15px;
}
.wares {
  font-size: 19px;
  color: #020c1d;
  font-weight: bold;
  margin-top: 20px;
  font-family: "PingFang SC";
}
.initial {
  font-size: 16px;
  color: #afb3bc;
  margin-top: 20px;
}
</style>
